<template>
    <div>
        <div class="btn">
            <el-button type="success" @click="addAllocate">创建调拨</el-button>
            <el-button type="primary" @click="addDelivery">创建出库</el-button>
            <el-button type="primary" @click="addPurchase">创建采购</el-button>
        </div>
        <!-- 详情说明  -->
        <div class="info">
            <p>此处商品库存为该商品在所以仓库的库存总和，不可修改，不受调拨变化，用户核销领取后，数值-1</p>
            <p>商品编码不允许重复，是该商品的唯一识别编号</p>
        </div>
        <!--筛选区域-->
        <el-row :gutter="10" type="flex">
            <el-col :span="4">
                <el-input v-model="form.name" clearable placeholder="请输入商品名称" style="max-width: 220px;" @clear="_getGiftList(1)"></el-input>
            </el-col>
<!--            <el-col :span="4">-->
<!--                <el-select v-model="form.sort" clearable placeholder="请选择商品分类">-->
<!--                    <el-option-->
<!--                            v-for="item in sortList"-->
<!--                            :key="item.id"-->
<!--                            :label="item.name"-->
<!--                            :value="item.id">-->
<!--                    </el-option>-->
<!--                </el-select>-->
<!--            </el-col>-->
            <el-col :span="4">
                <el-select v-model="form.wid" clearable placeholder="选择仓库">
                    <el-option
                            v-for="item in warehouseListAll"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="12" style="display: flex;justify-content: flex-end">
                <el-button type="primary" plain @click="_getGiftList(1)">查询</el-button>
                <el-button type="primary" @click="addGoods">添加商品</el-button>
                <el-button type="warning">导入</el-button>
            </el-col>
        </el-row>

        <!--表格开始-->
        <el-table :data="tableData" v-loading="loading" style="width: 100%;margin-top: 15px;" :header-cell-style="{background:'#eef1f6',color:'#606266'}" @selection-change="handleSelectionChange">
<!--            <el-table-column type="selection" width="55"></el-table-column>-->
<!--            <el-table-column label="商品编码" prop="number"></el-table-column>-->
            <el-table-column label="商品名称" prop="name"></el-table-column>
            <el-table-column label="商品分类" prop="sname"></el-table-column>
            <el-table-column label="商品图片">
                <template slot-scope="scope">
                    <img :src="scope.row.image" alt="" style="width: 40px;height: 40px;border-radius: 4px">
                </template>
            </el-table-column>
            <el-table-column label="市场价（元）" prop="price"></el-table-column>
            <el-table-column label="库存" prop="total"></el-table-column>
            <el-table-column label="是否签约礼品">
                <template slot-scope="scope">
                    <el-switch
                        v-model="scope.row.is_sign"
                        :active-value="1"
                        :inactive-value="0"
                        @change="signChange(scope.row)">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column label="备注" prop="remark"></el-table-column>
            <el-table-column label="操作" width="160">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="primary"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDel(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <Pagination @handleClickPage="currentPage" :total="total - 0"></Pagination>

        <!--新建商品的dialog-->
        <el-dialog
            :visible.sync="goodsAddDialog"
            width="50%"
            @close="goodsAddDialogClose">
            <!--这里的插槽会替换title显示的内容-->
            <div slot="title" class="header-title">
                <p class="title-name">添加商品</p>
                <!--<p class="title-info">自定义商品名称</p>-->
            </div>
            <el-form :model="addForm" :rules="addRules" ref="addForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="商品名称" prop="name">
                    <el-input v-model="addForm.name" placeholder="请输入商品名称"  style="width: 304px"></el-input>
                </el-form-item>
                <el-form-item label="商品分类" prop="sid">
                    <el-select v-model="addForm.sid" clearable placeholder="请选择商品分类"  style="width: 304px">
                        <el-option
                                v-for="item in sortList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
<!--                <el-form-item label="换课节数" prop="class_num">-->
<!--                    <el-input v-model="addForm.class_num" placeholder="请输入换课数"  style="width: 304px" type="number"></el-input>-->
<!--                </el-form-item>-->
                <el-form-item label="市场价格" prop="price">
                    <el-input v-model="addForm.price" placeholder="请输入市场价格"  style="width: 304px" type="number"></el-input>
                </el-form-item>
                <el-form-item label="成本价格" prop="cost_price">
                    <el-input v-model="addForm.cost_price" placeholder="请输入成本价格" style="width: 304px" type="number"></el-input>
                </el-form-item>
                <el-form-item label="商品图片" prop="image">
                    <el-upload
                            class="avatar-uploader"
                            action=""
                            :show-file-list="false"
                            accept=".jpeg,.jpg,.png"
                            :http-request="upGoodsImg">
                        <img v-if="addForm.image" :src="addForm.image" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="addForm.remark" style="width: 304px" placeholder="备注"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="goodsAddDialogClose">取 消</el-button>
                <el-button type="primary" @click="save">保 存</el-button>
            </span>
        </el-dialog>

        <!--编辑商品的dialog-->
        <el-dialog
                :visible.sync="goodsEditDialog"
                width="50%"
                @close="goodsEditDialogClose">
            <!--这里的插槽会替换title显示的内容-->
            <div slot="title" class="header-title">
                <p class="title-name">编辑商品</p>
                <!--<p class="title-info">自定义商品名称</p>-->
            </div>
            <el-form :model="editForm" :rules="addRules" ref="editForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="商品名称" prop="name">
                    <el-input v-model="editForm.name" placeholder="请输入商品名称"  style="width: 304px"></el-input>
                </el-form-item>
                <el-form-item label="商品分类" prop="sid">
                    <el-select v-model="editForm.sid" clearable placeholder="请选择用户"  style="width: 304px">
                        <el-option
                                v-for="item in sortList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
<!--                <el-form-item label="换课节数" prop="class_num">-->
<!--                    <el-input v-model="editForm.class_num" placeholder="请输入换课数"  style="width: 304px" type="number"></el-input>-->
<!--                </el-form-item>-->
                <el-form-item label="市场价格" prop="price">
                    <el-input v-model="editForm.price" placeholder="请输入市场价格"  style="width: 304px" type="number"></el-input>
                </el-form-item>
                <el-form-item label="成本价格" prop="cost_price">
                    <el-input v-model="editForm.cost_price" placeholder="请输入成本价格"  style="width: 304px" type="number"></el-input>
                </el-form-item>
                <el-form-item label="商品图片" prop="image">
                    <el-upload
                            class="avatar-uploader"
                            action=""
                            :show-file-list="false"
                            accept=".jpeg,.jpg,.png"
                            :http-request="upGoodsImg">
                        <img v-if="editForm.image" :src="editForm.image" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="editForm.remark" style="width: 304px" placeholder="备注"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="goodsEditDialog = false">取 消</el-button>
                <el-button type="primary" @click="editSave">保 存</el-button>
            </span>
        </el-dialog>

        <!--创建采购的dialog-->
        <el-dialog
                :visible.sync="purchaseDialog"
                width="50%"
                @close="purchaseDialogClose">
            <!--这里的插槽会替换title显示的内容-->
            <div slot="title" class="header-title">
                <p class="title-name">创建采购</p>
                <p class="title-info">单品的采购库存进入仓库操作</p>
            </div>
            <el-form :model="purchaseForm" :rules="addRules" ref="purchaseForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="选择商品" required v-for="(item, index) in purchaseForm.gifts" :key="index">
<!--                    <el-select v-model="item.id" clearable placeholder="选择商品"  style="width: 200px;padding-right: 20px;">-->
<!--                        <el-option-->
<!--                                v-for="items in sortList"-->
<!--                                :key="items.id"-->
<!--                                :label="items.name"-->
<!--                                :value="items.id">-->
<!--                        </el-option>-->
<!--                    </el-select>-->
                    <el-select
                            v-model="item.id"
                            clearable
                            filterable
                            remote
                            reserve-keyword
                            placeholder="请输入关键词"
                            :remote-method="goodsRemoteMethod"
                            @change="goodsChange"
                            :loading="goodsLoading" style="width: 200px;padding-right: 20px;">
                        <el-option
                                v-for="item in goodsOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                    <el-input v-model.number="item.total" placeholder="填写库存" type="number" style="width: 120px" :min="1"></el-input>
                    <i class="el-icon-circle-plus" @click="addPurchaseGood"></i>
                    <i class="el-icon-error" @click="delPurchaseGood(index)" v-show="purchaseForm.gifts.length > 1"></i>

                </el-form-item>
                <el-form-item label="选择仓库" prop="wid">
                    <el-select v-model="purchaseForm.wid" clearable placeholder="请选择仓库"  style="width: 386px">
                        <el-option
                                v-for="item in warehouseList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="purchaseForm.remark" style="width: 386px" placeholder="备注"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="purchaseDialog = false">取 消</el-button>
                <el-button type="primary" @click="purchaseSave">保 存</el-button>
            </span>
        </el-dialog>

        <!--创建出库的dialog-->
        <el-dialog
                :visible.sync="deliveryDialog"
                width="50%"
                @close="deliveryDialogClose">
            <!--这里的插槽会替换title显示的内容-->
            <div slot="title" class="header-title">
                <p class="title-name">创建出库</p>
                <p class="title-info">单品的库存消耗操作</p>
            </div>
            <el-form :model="deliveryForm" :rules="addRules" ref="deliveryForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="选择仓库" prop="wid">
                    <el-select v-model="deliveryForm.wid" clearable placeholder="请选择仓库"  style="width: 386px">
                        <el-option
                                v-for="item in warehouseList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="选择商品" required v-for="(item, index) in deliveryForm.gifts" :key="index">
                    <el-select
                            v-model="item.id"
                            clearable
                            filterable
                            remote
                            reserve-keyword
                            placeholder="请输入关键词"
                            :remote-method="goodsRemoteMethodDelivery"
                            @change="goodsChange"
                            :loading="goodsLoading" style="width: 200px;padding-right: 20px;">
                        <el-option
                                v-for="item in goodsOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                    <el-input v-model.number="item.total" placeholder="填写库存" type="number" style="width: 120px" :min="1"></el-input>
                    <i class="el-icon-circle-plus" @click="addDeliveryGood"></i>
                    <i class="el-icon-error" @click="delDeliveryGood(index)" v-show="deliveryForm.gifts.length > 1"></i>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="deliveryForm.remark" style="width: 386px" placeholder="备注"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="deliveryDialog = false">取 消</el-button>
                <el-button type="primary" @click="deliverySave">保 存</el-button>
            </span>
        </el-dialog>

        <!--创建调拨的dialog-->
        <el-dialog
                :visible.sync="allocateDialog"
                width="50%"
                @close="allocateDialogClose">
            <!--这里的插槽会替换title显示的内容-->
            <div slot="title" class="header-title">
                <p class="title-name">创建调拨</p>
                <p class="title-info">单品的库存从一个库存移动至另一个库存</p>
            </div>
            <el-form :model="allocateForm" :rules="addRules" ref="allocateForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="原始仓库" prop="old_wid">
                    <el-select v-model="allocateForm.old_wid" clearable placeholder="请选择原始仓库"  style="width: 386px">
                        <el-option
                                v-for="item in warehouseList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="选择商品" required v-for="(item, index) in allocateForm.gifts" :key="index">
                    <el-select
                            v-model="item.id"
                            clearable
                            filterable
                            remote
                            reserve-keyword
                            placeholder="请输入关键词"
                            :remote-method="goodsRemoteMethodAllocate"
                            @change="goodsChange"
                            :loading="goodsLoading" style="width: 200px;padding-right: 20px;">
                        <el-option
                                v-for="item in goodsOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                    <el-input v-model.number="item.total" placeholder="填写库存" type="number" style="width: 120px" :min="1"></el-input>
                    <i class="el-icon-circle-plus" @click="addAllocateGood"></i>
                    <i class="el-icon-error" @click="delAllocateGood(index)" v-show="allocateForm.gifts.length > 1"></i>
                </el-form-item>
                <el-form-item label="目标仓库" prop="wid">
                    <el-select v-model="allocateForm.wid" clearable placeholder="请选择目标仓库"  style="width: 386px">
                        <el-option
                                v-for="item in warehouseListAll"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="allocateForm.remark" style="width: 386px" placeholder="备注"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="allocateDialog = false">取 消</el-button>
                <el-button type="primary" @click="allocateSave">保 存</el-button>
            </span>
        </el-dialog>

        <!--是否签约礼品dialog-->
        <el-dialog
                title="填写换课数"
                :visible.sync="signGiftDialog"
                :close-on-click-modal="false"
                :close-on-press-escape="false"
                :show-close="false"
                width="30%">
            <el-input v-model.number="class_num" placeholder="填写换课数" type="number" :min="0"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelSignGift">取 消</el-button>
                <el-button type="primary" @click="sureSignGift">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import Pagination from '../../components/pagination'
    import { getGiftList, giftSortList, addGoods, editGoods, delGoods, findGoods, procurement, warehouseList, delivery, allocate, warehouseGetGift, setSign, getGiftProcurement } from '../../api/warehouseApi'
    import { uploadImage } from '../../api/publicApi'
    export default {
        name: "goods-management",
        data () {
            return {
                form: {
                    name: '',
                    number: '',
                    sort: '',
                    wid: ''
                },
                purchaseForm: {
                    gifts: [
                        {
                            id: '',
                            total: null,
                        }
                    ],
                    wid: '',
                    remark: ''
                },
                deliveryForm: {
                    gifts: [
                        {
                            id: '',
                            total: null,
                        }
                    ],
                    wid: '',
                    remark: ''
                },
                allocateForm: {
                    gifts: [
                        {
                            id: '',
                            total: null,
                        }
                    ],
                    old_wid: '',
                    wid: '',
                    remark: ''
                },
                tableData: [],
                total: '',
                loading: true,
                page: 1, // 页数
                goodsAddDialog: false,
                addForm: {
                    number: '',
                    name: '',
                    sid: '',
                    // class_num: '',
                    price: '',
                    cost_price: '',
                    image: '',
                    remark: ''
                },
                addRules: {
                    name: [
                        { required: true, message: '请输入商品名称', trigger: 'blur' },
                    ],
                    sid: [
                        { required: true, message: '请选择商品分类', trigger: 'change' },
                    ],
                    // class_num: [
                    //     { required: true, message: '请输入换课数', trigger: 'blur' },
                    // ],
                    price: [
                        { required: true, message: '请输入市场价格', trigger: 'blur' },
                    ],
                    cost_price: [
                        { required: true, message: '请输入成本价格', trigger: 'blur' },
                    ],
                    image: [
                        { required: true, message: '请上传商品图片', trigger: 'change' },
                    ],
                    wid: [
                        { required: true, message: '请选择仓库', trigger: 'change' },
                    ],
                    old_wid: [
                        { required: true, message: '请选择原始仓库', trigger: 'change' },
                    ],
                }, // 效验规则
                sortList: [], // 商品分类
                goodsEditDialog: false,
                editForm: {},
                multipleSelection: [],
                purchaseDialog: false,
                warehouseList: [],

                // 选择商品的需要的值
                goodsOptions: [],
                // goodsValue: '',
                goodsList: [],
                goodsLoading: false,
                // 出库
                deliveryDialog: false,
                allocateDialog: false,
                signGiftDialog: false, // 是否签约礼品
                currentObj: {},
                class_num: '',
                warehouseListAll: []
            }
        },
        created() {
            if (this.$route.query.wid) this.form.wid = this.$route.query.wid
            this._getGiftList(this.page) // 获取礼品列表
            this._giftSortList() // 分类
            // this._warehouseList() // 仓库列表自己的
            this._warehouseListAll() // 仓库列表所有的
        },
        computed: {
            getLength() {
                return this.purchaseForm.goodName.length
            }
        },
        methods: {
            // 获取礼品列表
            async _getGiftList(page) {
                let params = {p: page, length: 10,name: this.form.name, wid: this.form.wid}
                const res = await getGiftList(params)
                if (res.code === 0) {
                    console.log(res)
                    this.tableData = res.data.list
                    this.total = res.data.total
                    this.loading = false
                }
            },
            // 添加商品
            addGoods() {
                // this._giftSortList('add')
                this.goodsAddDialog = true
            },
            async _giftSortList(data) {
                // 获取商品分类
                const res = await giftSortList()
                if (res.code === 0) {
                    console.log(res)
                    this.sortList = res.data.list
                    // data === 'add' ? this.goodsAddDialog = true : this.goodsEditDialog = true
                }
            },
            // 分页的 当前点击的页数
            currentPage(newPage) {
                console.log(`当前页: ${newPage}`)
                this.page = newPage
                this.loading = true
                this._getGiftList(this.page) // 获取礼品分类列表
            },
            // 添加商品分类的dialog关闭
            goodsAddDialogClose() {
                this.$refs.addForm.resetFields()
                this.goodsAddDialog = false
                this.addForm.remark = ''
            },
            // 添加商品的上传图片
            async upGoodsImg(params) {
                const file = params.file
                console.log(file.type)
                // console.log(data)
                console.log(file.type === 'image/jpeg')
                if (file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png') {
                    const form = new FormData()
                    form.append("image", file)
                    const res = await uploadImage(form)
                    if (res.code === 0) {
                        this.$message.success('图片上传成功')
                        console.log(res)
                        this.editForm.id ? this.editForm.image = res.data.filename : this.addForm.image = res.data.filename
                    }
                } else {
                    this.$message.warning('图片只能是 JPG 或者 PNG 格式')
                    // return false
                }
            },
            // 编辑
            async handleEdit(index, row) {
                console.log(row)
                this.editForm.id = row.gid
                const res = await findGoods({id: row.gid})
                this.editForm = res.data.list
                this.goodsEditDialog = true
            },
            // 删除
            handleDel(index, row) {
                console.log(index, row)
                let arr = []
                arr.push(row.id)
                let params = {ids: arr, delete: 1}
                this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    const res = await delGoods(params)
                    if (res.code === 0) {
                        this.$message.success('删除成功!')
                        this._getGiftList(this.page) // 获取礼品分类列表
                    }
                }).catch(() => {
                    this.$message.info('已取消删除')
                })
            },
            // 添加商品保存
            save() {
                console.log(this.addForm)
                this.$refs.addForm.validate(async valid => {
                    if (!valid) return false
                    console.log(valid)
                    let form = {...this.addForm}
                    form.class_num = form.class_num - 0
                    form.price = form.price - 0
                    form.total = form.total - 0
                    // const res = await addGoods(this.addForm)
                    const res = await addGoods(form)
                    if (res.code === 0) {
                        this.$message.success('添加成功')
                        console.log(res)
                        this.goodsAddDialog = false
                        this._getGiftList(1) // 获取礼品列表
                    }
                })
            },
            // 编辑保存
            async editSave() {
                // delete this.editForm.remark
                delete this.editForm.sname
                console.log(this.editForm)
                const res = await editGoods(this.editForm)
                if (res.code === 0) {
                    this.$message.success('修改成功')
                    this.goodsEditDialog = false
                    this._getGiftList(this.page) // 获取礼品列表
                }
            },
            handleSelectionChange(val) {
                console.log(val)
                this.multipleSelection = val
            },
            // 编辑关闭dialog
            goodsEditDialogClose() {
                this.$refs.editForm.resetFields()
                this.goodsEditDialog = false
            },
            //仓库列表自己的
            async _warehouseList() {
                const res = await warehouseList({oneself: 1})
                console.log(res)
                this.warehouseList = res.data.list
            },
          //仓库列表所有的
          async _warehouseListAll() {
            const res = await warehouseList()
            console.log(res)
            this.warehouseListAll = res.data.list
          },
            // 创建采购
            addPurchase() {
                this.purchaseDialog = true
                this._warehouseList()
            },
            // 创建采购 关闭dialog
            purchaseDialogClose() {
                this.$refs.purchaseForm.resetFields()
                this.purchaseForm.remark = ''
                this.purchaseForm.gifts = [{id: '',total: null}]
            },
            // 创建采购里面的添加名称内容
            addPurchaseGood() {
                this.purchaseForm.gifts.push({id: '',total: null})
            },
            // 创建采购里面的删除名称内容
            delPurchaseGood(index) {
                this.purchaseForm.gifts.splice(index, 1)
            },
            // 创建采购保存
            purchaseSave() {
                this.$refs.purchaseForm.validate( async valid => {
                    if (!valid) return false
                    console.log(this.purchaseForm)
                    const res = await procurement(this.purchaseForm)
                    this.$message.success('采购成功')
                    this.purchaseDialog = false
                    this._getGiftList(this.page) // 获取礼品列表
                })
            },
            // 远程搜索商品
            async goodsRemoteMethod(query) {
                if (query !== '') {
                    this.goodsLoading = true
                    const res = await getGiftProcurement({name: query})
                    this.goodsList = res.data.list.map(item => {
                        return {label: item.name, value: item.id}
                    })
                    setTimeout(() => {
                        this.goodsLoading = false
                        this.goodsOptions = this.goodsList.filter(item => {
                            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1
                        })
                    }, 200)
                } else {
                    this.goodsOptions = []
                }
            },
            // 远程搜索商品
            async goodsRemoteMethodDelivery(query) {
                if (query !== '') {
                    this.goodsLoading = true
                    const res = await warehouseGetGift({name: query,wid: this.deliveryForm.wid})
                    this.goodsList = res.data.list.map(item => {
                        return {label: item.name + '(' + '库存' + item.total + ')', value: item.gid}
                    })
                    setTimeout(() => {
                        this.goodsLoading = false
                        this.goodsOptions = this.goodsList.filter(item => {
                            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1
                        })
                    }, 200)
                } else {
                    this.goodsOptions = []
                }
            },
            // 远程搜索商品
            async goodsRemoteMethodAllocate(query) {
                if (query !== '') {
                    this.goodsLoading = true
                    const res = await warehouseGetGift({name: query,wid: this.allocateForm.old_wid})
                    this.goodsList = res.data.list.map(item => {
                        return {label: item.name + '(' + '库存' + item.total + ')', value: item.gid}
                    })
                    setTimeout(() => {
                        this.goodsLoading = false
                        this.goodsOptions = this.goodsList.filter(item => {
                            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1
                        })
                    }, 200)
                } else {
                    this.goodsOptions = []
                }
            },
            // 远程搜索 选择
            goodsChange(val) {
                console.log(val)
            },
            // 创建出库
            addDelivery() {
                this.deliveryDialog = true
                this._warehouseList()
            },
            // 出库关闭dialog
            deliveryDialogClose() {
                this.$refs.deliveryForm.resetFields()
                this.deliveryForm.remark = ''
                this.deliveryForm.gifts = [{id: '',total: null}]
            },
            addDeliveryGood() {
                this.deliveryForm.gifts.push({id: '',total: null})
            },
            delDeliveryGood(index) {
                this.deliveryForm.gifts.splice(index, 1)
            },
            // 出库保存
            deliverySave() {
                this.$refs.deliveryForm.validate( async valid => {
                    if (!valid) return false
                    if (this.deliveryForm.gifts[0].id === '' || this.deliveryForm.gifts[0].total === null) return this.$message.error('请选择商品')
                    console.log(this.deliveryForm)
                    const res = await delivery(this.deliveryForm)
                    this.$message.success('出库成功')
                    this.deliveryDialog = false
                    this._getGiftList(this.page) // 获取礼品列表
                })
            },
            // 调拨
            addAllocate() {
                this.allocateDialog = true
                this._warehouseList()
            },
            allocateDialogClose() {
                this.$refs.allocateForm.resetFields()
                this.allocateForm.remark = ''
                this.allocateForm.gifts = [{id: '',total: null}]
            },
            addAllocateGood() {
                this.allocateForm.gifts.push({id: '',total: null})
            },
            delAllocateGood(index) {
                this.allocateForm.gifts.splice(index, 1)
            },
            allocateSave() {
                this.$refs.allocateForm.validate( async valid => {
                    if (!valid) return false
                    if (this.allocateForm.gifts[0].id === '' || this.allocateForm.gifts[0].total === null) return this.$message.error('请选择商品')
                    console.log(this.allocateForm)
                    const res = await allocate(this.allocateForm)
                    this.$message.success('调拨成功')
                    this.allocateDialog = false
                    this._getGiftList(this.page) // 获取礼品列表
                })
            },
            // 是否签约礼品开关
            signChange (row) {
                console.log(row)
                this.currentObj = row
                if (row.is_sign === 1) {
                    this.signGiftDialog = true
                } else {
                    this.$confirm('关闭签约礼品, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(async () => {
                        let data = {id: this.currentObj.id, is_sign: 0}
                        const res = await setSign(data)
                        this.$message.success('设置成功!')
                        this._getGiftList(this.page) // 获取礼品列表
                    }).catch(() => {
                        this.$message.info('已取消')
                        row.is_sign = 1
                    })
                }
            },
            // 是否签约礼品 取消
            cancelSignGift() {
                this.currentObj.is_sign = 0
                this.signGiftDialog = false
                this.class_num = ''
            },
            // 是否签约礼品 确定
            async sureSignGift() {
              console.log(this.class_num)
              console.log(this.class_num.length)
                if (this.class_num.length == 0) return this.$message.error('请填写换课数')
                let data = {id: this.currentObj.id,class_num: this.class_num, is_sign: 1}
                const res = await setSign(data)
                console.log(res)
                this.signGiftDialog = false
                this.$message.success('设置成功')
                this._getGiftList(this.page) // 获取礼品列表
            }
        },
        components: {
            Pagination
        },
    }
</script>

<style scoped lang="scss">
    .btn {
        text-align: right;
        margin-bottom: 15px;
    }
    .header-title {
        .title-name {
            font-size: 18px;
            color: #333;
            font-weight: 600;
            margin-bottom: 0;
        }
        .title-info {
            font-size: 11px;
            color: #7d7d7d;
            margin-bottom: 0;
            margin-top: 4px;
        }
    }
    .avatar-uploader {
    	border: 1px dashed #d9d9d9;
    	border-radius: 6px;
    	cursor: pointer;
    	position: relative;
    	overflow: hidden;
        width: 128px;
        height: 128px;
    }
    .avatar-uploader:hover {
    	border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 128px;
        height: 128px;
        line-height: 128px;
        text-align: center;
    }
    .avatar {
        width: 128px;
        height: 128px;
        display: block;
    }
    .info {
        margin: 15px 0 20px 0;
        padding: 5px 20px;
        background-color: #E9F6FF;
        font-size: 12px;
        border-radius: 4px;
    }
    .el-icon-circle-plus {
        font-size: 26px;
        margin-top: 8px;
        margin-left: 20px;
    }
    .el-icon-error {
        font-size: 26px;
        margin-top: 8px;
        margin-left: 20px;
    }
    .el-icon-circle-plus:hover{
        color: #5cb6ff;
        cursor: pointer;
    }
    .el-icon-error:hover {
        color: #f56c6c;
        cursor: pointer;
    }
</style>
